<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 作用域：影响变量的可以使用的范围
        //    JS 全局作用域
        //       局部作用域(方法体)
        
        // 全局变量可以在和当前页面有关的任意JS脚本中被使用
        let arg1 = "全局作用域下的全局变量";
        
        function printFun(){
            // 局部作用域声明的变量只能在当前作用域环境下使用
            let arg2 = "局部作用域下的局部变量";
            console.log("自定义方法被执行");
            console.log("局部环境访问全局变量", arg1 );
            
        }
        
        // console.log("全局环境下强行调用局部变量",arg2);

        // JS允许方法内继续声明新的方法
        // 嵌套作用域 => 作用域链
        function fun1(){
            console.log("fun1");
            let argFun1 = "fun1的局部变量";
            console.log("fun1:",argFun1);
            // fun2 是fun1局部作用域方法，只能在fun1中被调用
            function fun2(){
                console.log("fun2");
                // 低层作用域可以直接访问高层作用域声明的局部变量
                console.log("fun2:",argFun1);
                // 高层作用域不能直接访问低层作用域变量
                // console.log("fun3:",argFun3);
                function fun3() {
                    let argFun3 = "fun3的局部变量";
                    console.log(argFun3);
                    console.log("fun3");
                }
                fun3();
            }
            // 调用局部方法
            fun2();
        }

        fun1();
        // fun2();


    </script>
    <script>
        console.log("第二段JS内联脚本访问第一段申明的全局变量",arg1)
    </script>
    <script src="./js/12.js"></script>
</head>
<body>
    <!-- onclick 为标签绑定了鼠标的点击事件 -->
    <input type="button" value="触发打印方法" onclick="printFun()">
</body>
</html>